import { Map, Marker } from 'react-amap'
import { ReactElement } from 'react'

const MapCmp = () => {
  const Loading: ReactElement = (
    <div
      style={{
        position: 'relative',
        height: '100%',
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      Loading Map...
    </div>
  )
  const amapEvents = () => {
    return {
      created: (mapInstance: { add: (arg0: any) => void }) => {
        //@ts-ignore
        let geojson = new AMap.GeoJSON({
          geoJSON: require('./area.json'), // 本地json文件
          // 还可以自定义getMarker和getPolyline
          getPolygon: function (_: any, lnglats: any) {
            //@ts-ignore
            return new AMap.Polygon({
              path: lnglats,
              fillOpacity: 0.1, // 透明度
              strokeColor: '#5dbcb9',
              fillColor: '#05c9e6',
            })
          },
        })
        mapInstance.add(geojson)
      },
    }
  }
  const plugins: Array<string> = ['ToolBar', 'Scale', 'MapType', 'OverView', 'ControlBar']
  return (
    <div style={{ width: '100%', height: '400px', padding: '10px' }}>
      <Map
        amapkey={'f812bfe32bf19dd61599b3aff2bfe1a4'}
        loading={Loading}
        // @ts-ignore
        plugins={plugins}
        center={[30.16, 120.1]}
        status={{ zoomEnable: true, dragEnable: true }}
        zoom={11}
        events={amapEvents()}
      >
      </Map>
    </div>
  )
}
export default MapCmp
